<template>
	<view>
		<carHeader :title="'经营统计'">
		</carHeader>
		<view class="one">
			<view class="one-top">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
						:class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">
						{{tab.name}}
					</view>
				</scroll-view>
				<view style="display: flex; flex-direction: row;">
					<image src="../../static/日历 (1).png"></image>
					<view class="xuanze">
						<uni-data-select class="x" v-model="value" :localdata="range"
							@change="checkIndex(value)"></uni-data-select>
					</view>
				</view>
			</view>
			<!-- 内容切换 -->
			<view class="content">
				<view class="cont-up">
					<text class="color">￥{{all.upMoney}}</text>
					<text>收入</text>
				</view>
				<view class="cont-up">
					<text class="color2">{{all.orderNumber}}</text>
					<text>订单</text>
				</view>
			</view>
		</view>
		<!-- 饼图 -->
		<view class="two">
			<view @click="updateChart"
				style="margin-left: 20rpx; margin-top: 20rpx; margin-bottom: 20rpx; font-size: 38rpx;">
				<text>收入分布</text>
			</view>
			<view style="width: 100%; height: 400rpx;">
				<view class="empty" v-if="data1.length === 0">暂无收入</view>
				<qiun-data-charts v-else type="pie" :opts="opts1" :chartData="chartData1" />
			</view>
		</view>
		<!-- 柱状图 -->
		<view class="three">
			<view @click="updateChart"
				style="margin-left: 20rpx; margin-top: 20rpx; margin-bottom: 20rpx; font-size: 38rpx;">
				<text>订单分布</text>
			</view>
			<view style="width: 100%; height: 400rpx;">
				<view class="empty" v-if="data2.length === 0 && data3.length === 0">暂无订单</view>
				<qiun-data-charts v-else type="column" :opts="opts2" :chartData="chartData2" />

			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				chart1: null,
				chart2: null,
				// 统计数据的参数
				queryParams: {
					// seller: 1,
					// 时间区间
					startTime: null,
					endTime: null,
				},
				// 收入和订单数量
				all: {
					upMoney: 0,
					orderNumber: 0
				},
				// 不同订单统计
				type: [],
				// 饼图统计
				data1: [],
				// 柱状图
				data2: [], // 类型
				data3: [], // 数据
				// 饼图
				chartData1: {},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				// 柱状图
				chartData2: {},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},


				value: 0,
				range: [{
						value: 7,
						text: "一周之内"
					},
					{
						value: 8,
						text: "本月之内"
					},
					{
						value: 9,
						text: "上一个月"
					},
				],

				city: "",
				navIndex: 0,
				tabBars: [{
					name: '今日',
					id: 'guanzhu'
				}, {
					name: '昨日',
					id: 'tuijian'
				}],
			}
		},
		mounted() {
			this.getOrderCount();
		},
		// 页面加载时
		onLoad() {
			this.getdataTime();
			// 获取商家id，赋值给 queryParams.seller
			this.getOrderCount();
		},
		methods: {
			// 更新统计图
			updateChart() {
				console.log(this.chartData1);
				console.log(this.chartData2);
				this.getOrderCount();
			},
			// 从后端获取统计数据
			getOrderCount() {
				let that = this;
				uni.request({
					url: "http://localhost:8080/carShop/shopStatistics/getCount",
					method: "GET",
					data: {
						// seller: that.queryParams.seller,
						startTime: that.queryParams.startTime,
						endTime: that.queryParams.endTime,
					},
					success: (res) => {
						console.log(res);
						this.all = {
							upMoney: 0,
							orderNumber: 0
						};
						this.data1 = [];
						this.data2 = [];
						this.data3 = [];
						if (res.data.data.all !== null) {
							that.all = res.data.data.all;
						}
						if (res.data.data.type.length !== 0) {
							that.type = res.data.data.type;
							for (let i = 0; i < this.type.length; i++) {
								const one = {};
								one.name = this.type[i].orderType;
								one.value = this.type[i].orderNumber;
								this.data1[i] = one;
								this.data2[i] = one.name;
								this.data3[i] = one.value;
							}
							this.initChart();
						}


					}
				})
			},
			// 获取今日时间
			getdataTime() {
				let wk = new Date().getDay()
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				// let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let datetime = yy + "-" + mm + "-" + dd;
				this.queryParams.startTime = datetime;
				this.queryParams.endTime = yy + "-" + mm + "-" + (dd + 1);
				console.log(datetime);
			},
			// 获取昨天日期
			getYesterdayTime() {
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				this.queryParams.startTime = yy + "-" + mm + "-" + (dd - 1);
				this.queryParams.endTime = yy + "-" + mm + "-" + (dd);
				console.log(this.queryParams.startTime);
			},

			comboxInput(e) {
				console.log("当前输入的值：", e);
			},
			// 选择其他日期
			checkIndex(index) {
				console.log(index)
				if (index == 0) {
					this.getdataTime();
					this.value = 0;
				}
				if (index == 1) {
					this.getYesterdayTime();
					this.value = 0;
				}
				let oneDay = 24 * 3600 * 1000;
				let today = Date.parse(new Date());
				console.log(today);
				if (index == 7) { // 一周之内
					let now = new Date(today - 7 * oneDay);
					let yy = now.getFullYear();
					let mm = now.getMonth() + 1;
					let dd = now.getDate();
					let dd2 = new Date().getDate();
					this.queryParams.startTime = yy + "-" + mm + "-" + dd;
					this.queryParams.endTime = yy + "-" + mm + "-" + dd2;
				}
				if (index == 8) { // 本月之内
					let now = new Date(today);
					let yy = now.getFullYear();
					let mm = now.getMonth() + 1;
					let dd = new Date().getDate();
					this.queryParams.startTime = yy + "-" + mm + "-" + "01";
					this.queryParams.endTime = yy + "-" + mm + "-" + (dd + 1);
				}
				if (index == 9) { // 上一月
					let now = new Date(today);
					let yy = now.getFullYear();
					let mm = now.getMonth();
					this.queryParams.startTime = yy + "-" + mm + "-" + "01";
					this.queryParams.endTime = yy + "-" + (mm + 1) + "-" + "01";
				}
				this.chartData1 = {};
				this.chartData2 = {};
				this.getOrderCount();
				this.navIndex = index;
			},

			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},

			initChart() {
				// 饼图数据
				let res1 = {
					series: [{
						data: this.data1
					}]
				};
				this.chartData1 = JSON.parse(JSON.stringify(res1));
				// 柱状图数据
				let res2 = {
					categories: this.data2,
					series: [{
						name: "订单数量",
						data: this.data3
					}]
				};
				this.chartData2 = JSON.parse(JSON.stringify(res2));
			},


		}
	}
</script>

<style lang="scss">
	.one {
		background-color: white;
		width: 90%;
		height: 320rpx;
		position: absolute;
		top: 50px;
		left: 5%;
		border-radius: 10px;

		.one-top {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			// background-color: #00ff00;
		}

		image {
			width: 50rpx;
			height: 50rpx;
			// background-color: #ffaa00;
			// margin: 40rpx 0;
			margin-top: 50rpx;

		}

		.xuanze {
			// background-color: #005500;
			margin-top: 40rpx;
			width: 200rpx;
			// padding: 10rpx 0;

			.x {
				width: 200rpx;
			}
		}


		.activite {
			color: white;
			background-color: #2f81fa
		}

		.content {
			// background-color: #CCCCCC;
			// height: 100px;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			border-radius: 10px;

			.cont-up {
				width: 100px;
				// background-color: #2dfaf4;
				display: flex;
				flex-direction: column;
				align-items: center;
				line-height: 30px;
				font-size: 18px;
				font-weight: 800;
				margin-top: 15px;
				margin-bottom: 15px;

				.color {
					color: #2f81fa;
				}

				.color2 {
					color: #ffaa00;
				}
			}

		}

		.scroll-view_H {
			white-space: nowrap;
			width: 300rpx;
			// background-color: #ffaa00;
			color: #2f81fa;
			margin-left: 100rpx;
		}

		.scroll-view-item_H {
			display: inline-block;
			width: 50%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			padding: 10px 0;
			margin-top: 20px;
		}

	}

	.two {
		background-color: white;
		width: 90%;
		height: 520rpx;
		position: absolute;
		top: 220px;
		left: 5%;
	}

	.three {
		background-color: white;
		width: 90%;
		height: 520rpx;
		position: absolute;
		left: 5%;
		border-radius: 10px;
		top: 980rpx;
	}

	.empty {
		width: 100%;
		height: 400rpx;
		font-size: 60rpx;
		color: #CCCCCC;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>